<template>
	<view class="tips-content" @click="gotoMsgInfo">
		<view class="tips-con">

			<!-- <view class="title-top">
				<view class="title-top-tips">
					<text>系统消息</text>
				</view>
				<view class="title-top-icon">
					<view class="icon-text">
						<text>点击详情</text>
					</view>
					<view class="icon-img">
						<image :src="require('@/static/img/common/goMore_1.svg')"></image>
					</view>
				</view>
			</view> -->


			<view class="title">
				<view class="title-left">
					<text>{{noticeData.title}}</text>
				</view>

				<!-- <view class="title-right">
					<view class="icon-text">
						<text>点击详情</text>
					</view>
					<view class="icon-img">
						<image :src="require('@/static/img/common/goMore_1.svg')"></image>
					</view>
				</view> -->
			</view>
			<view class="tips">
				<text selectable="true">{{noticeData.detail}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSystemNoticeByPage
	} from '@/api/http/main/home/system_notice.js'

	export default {
		props: ['tips'],
		data() {
			return {
				noticeData: {}
			}
		},
		methods: {
			//跳转系统消息页面
			gotoMsgInfo() {
				uni.navigateTo({
					url: '/subpkg/main/home/system-notice/system-notice'
				})
			},
			getSystemNoticeByPage(page, size) {
				getSystemNoticeByPage(page, size).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//this.total = res.data.pageInfo.total
					this.noticeData = res.data.busInfo[0]
					//console.log(res.data)
				})
			}
		},
		mounted() {
			this.getSystemNoticeByPage(1, 1)
		}
	}
</script>

<style lang="scss" scoped>
	.tips-content {
		width: 100%;
		background-color: #23D754;
		padding: 30rpx 0;
	}

	.tips-con {
		width: 86%;
		margin-left: 5%;
		padding: 2%;
		background-color: #fff;
		border-radius: 30rpx;

		.title-top {
			display: flex;
			justify-content: space-between;
			height: 60rpx;

			.title-top-tips {
				text {
					font-size: 32rpx;
				}
			}

			.title-top-icon {
				display: flex;
				justify-content: right;

				.icon-text {
					text {
						font-size: 28rpx;
						color: #B0B0AE;
					}
				}

				.icon-img {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}


		}

		.title {
			height: 60rpx;
			// line-height: 60rpx;
			display: flex;
			justify-content: space-between;

			.title-left {
				max-width: 300rpx;
				text-align: center;
				font-size: 32rpx;
				line-height: 60rpx;
				height: 60rpx;
				
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

			}

			.title-right {
				display: flex;
				justify-content: right;

				.icon-text {
					line-height: 60rpx;
					text {
						font-size: 28rpx;
						color: #B0B0AE;
					}
				}
				
				.icon-img {
					image {
						margin-top: 10rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.tips {
			font-size: 28rpx;
			color: #B0B0AE;

			/* white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis; */
		}

	}
</style>